import React, { Component } from 'react'

//1.创建一个 context对象
const UserContext = React.createContext({
  //默认值
  nickName: "xxx",
  level: 1
})

export default class App extends Component {
  constructor() {
    super()
    
    this.state = {
      nickName: 'yzhyzh',
      level: 9999
    }
  }

  render() {
    return (
      <div>
        {/* 2.使用 Provider value 来将当前的 UserContext 传递给以下的组件树 */}
        <UserContext.Provider value={this.state}>
          <Profile />
        </UserContext.Provider>

        {/* 4.会使用默认值 */}
        {/* <Profile /> */}
      </div>
    )
  }
}

function Profile() {
  return (
    <div>
      <ProHeader />

      <ul>
        <li>设置1</li>
        <li>设置2</li>
        <li>设置3</li>
        <li>设置4</li>
        <li>设置5</li>
      </ul>
      <hr />
      
      <ProHeader2 />
    </div>
  )
}

//3. 类组件
class ProHeader extends Component {
  //3.2 另一种写法 有点类似 前面传值属性验证了
  static contextType = UserContext
  render() {
    return (
      <div>
        <h2>用户昵称：{ this.context.nickName }</h2>
        <h2>用户等级：{ this.context.level }</h2>
      </div>
    )
  }
}
//3.1 指定 contextType 读取当前的 UserContext
// React 会往上找到最近的 Provider，然后使用它的值, 如果没有找到(就是没有在UserContext.Provider组件里) 就会使用默认值。
// ProHeader.contextType = UserContext

//函数组件
function ProHeader2() {
  return (
    <UserContext.Consumer>
      {
        user => (
          <div>
            <h2>用户昵称：{ user.nickName }</h2>
            <h2>用户等级：{ user.level }</h2>
          </div>
        )
      }
    </UserContext.Consumer>
  )
}